<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<title>HTML前端学习</title>
		<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
		<meta name="copyright" content="www.doyoe.com" />
		<style>
			
			.container{
				border: solid 1px black;
				/* height: 180px; */
			}
			
			.class1 {
				width: 200px;
				height: 100px;
				background: palegreen;
				float: left;
			}


			.class2 {
				width: 250px;
				height: 130px;
				background: gold;
				float: left;
			}


			.class3 {
				width: 300px;
				height: 180px;
				background: red;
				float: left;
			}
			
			.clear{
				clear:  both;
			}
		</style>
	</head>
	<body>




	<div class="container">
		<div class="class1">我是块级元素1，没有设置浮动</div>
		
		<div class="class2">我是块级元素2，没有设置浮动</div>
		
		<div class="class3">我是块级元素3，没有设置浮动</div>
	
	</div>
	
	<div class="clear"></div>
	<p >
		后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容后续的内容
	</p>





	</body>
</html>